<template>
  <view class="payment-page">
    <view class="page-header">
      <text class="title">订单支付</text>
    </view>

    <!-- 支付金额 -->
    <view class="payment-amount">
      <text class="amount-label">支付金额</text>
      <text class="amount-value">¥{{ amount }}</text>
    </view>

    <!-- 支付方式 -->
    <view class="payment-methods">
      <view class="method-item" :class="{ selected: paymentMethod === 'wechat' }" @click="selectMethod('wechat')">
        <image src="/static/icons/wechat-pay.png" class="method-icon"></image>
        <text class="method-name">微信支付</text>
        <uni-icons type="checkmark-circle" size="32" color="#007AFF" v-if="paymentMethod === 'wechat'"></uni-icons>
      </view>
      <view class="method-item" :class="{ selected: paymentMethod === 'alipay' }" @click="selectMethod('alipay')">
        <image src="/static/icons/alipay.png" class="method-icon"></image>
        <text class="method-name">支付宝</text>
        <uni-icons type="checkmark-circle" size="32" color="#007AFF" v-if="paymentMethod === 'alipay'"></uni-icons>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="order-info">
      <view class="info-item">
        <text class="info-label">订单编号</text>
        <text class="info-value">{{ orderNo }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">创建时间</text>
        <text class="info-value">{{ createTime }}</text>
      </view>
    </view>

    <!-- 支付按钮 -->
    <view class="payment-footer">
      <button class="pay-btn" type="primary" @click="confirmPayment">确认支付</button>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';
import { onLoad } from '@dcloudio/uni-app';


// 生成随机订单号
const generateOrderNo = () => {
  const prefix = 'ORD';
  const timestamp = Date.now().toString().slice(-8);
  const random = Math.floor(Math.random() * 10000).toString().padStart(4, '0');
  return `${prefix}${timestamp}${random}`;
};

export default defineComponent({
  setup() {

    const amount = ref<string>('0.00');
    const paymentMethod = ref<string>('wechat');
    const orderNo = ref<string>(generateOrderNo());
    const createTime = ref<string>(new Date().toLocaleString());

    onLoad((options: any) => {
      // 获取订单金额和支付方式
      if (options.amount) {
        amount.value = options.amount;
      }
      if (options.method) {
        paymentMethod.value = options.method;
      }
    });

    // 选择支付方式
    const selectMethod = (method: string) => {
      paymentMethod.value = method;
    };

    // 确认支付
    const confirmPayment = () => {
      // 在实际项目中，这里会调用支付API
      // 这里模拟支付成功
      uni.showLoading({ title: '支付处理中...' });

      setTimeout(() => {
        uni.hideLoading();
        // 模拟支付成功
        uni.showModal({
          title: '支付成功',
          content: '您的订单已支付成功！',
          showCancel: false,
          success: () => {
            // 跳转到订单列表或首页
            uni.navigateTo({ url: '/pages/order-list/index' });
          }
        });
      }, 2000);
    };

    return {
      amount,
      paymentMethod,
      orderNo,
      createTime,
      selectMethod,
      confirmPayment
    };
  }
});
</script>

<style scoped>
/* 页面头部 */
.page-header {
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  position: sticky;
  top: 0;
  z-index: 99;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  display: block;
}

/* 支付金额 */
.payment-amount {
  background-color: #fff;
  padding: 60rpx 20rpx;
  text-align: center;
}

.amount-label {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 20rpx;
  display: block;
}

.amount-value {
  font-size: 60rpx;
  color: #ff4400;
  font-weight: bold;
}

/* 支付方式 */
.payment-methods {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 0 20rpx;
}

.method-item {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.method-item:last-child {
  border-bottom: none;
}

.method-item.selected {
  color: #007AFF;
}

.method-icon {
  width: 50rpx;
  height: 50rpx;
  margin-right: 20rpx;
}

.method-name {
  flex: 1;
  font-size: 32rpx;
}

/* 订单信息 */
.order-info {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 0 20rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 28rpx;
  color: #666;
}

.info-value {
  font-size: 28rpx;
  color: #333;
}

/* 支付按钮 */
.payment-footer {
  padding: 30rpx 20rpx;
  background-color: #f5f5f5;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.pay-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 32rpx;
  border-radius: 10rpx;
}
</style>